<template>
	<div class="hello">
		<!-- <h1 style="background: linear-gradient(0deg, #99A0C2 0%, #FFFFFF 100%);font-size: 42px;
		position: absolute;
		top: 20%;
		right: 50%;
		transform: translateX(50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;">
			<img src="../assets/logo2.png" width="44px" height="44px" style="vertical-align: middle;margin-top: -10px;" alt="">
			联横利众官网管理
		</h1> -->
		<div class="small-box">
			<h1 style="background: linear-gradient(0deg, #99A0C2 0%, #FFFFFF 100%);font-size: 42px;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;">
						<img src="../assets/logo2.png" width="44px" height="44px" style="vertical-align: middle;margin-top: -10px;" alt="">
						联横利众官网管理
					</h1>
			<div class="login-box">
				<a-form-model class="login-form" ref="ruleForm" :model="ruleForm" :rules="rules" :wrapper-col="{ span: 24 }">
					<h2 style="font-size: 38px;color: #FFFFFF;">用户登录</h2>
					<a-form-model-item ref="username" class="c-flex" prop="username">
						<a-row :gutter="24">
							<!-- <a-col :span="4">
								<div solt="label" class="demo-ruleForm">用户名：</div>
							</a-col> -->
							<a-col :span="24">
								<a-input v-model="ruleForm.username" :max-length="20" @blur="
							          () => {
							            $refs.username.onFieldBlur();
							          }
							        "
								 @keyup.enter.native="submitForm"
								 class="inp" placeholder="请输入用户名" />
							</a-col>
						</a-row>
					</a-form-model-item>
					<a-form-model-item ref="password" class="c-flex" prop="password">
						<a-row :gutter="24">
							<!-- <a-col :span="4">
								<div solt="label" class="demo-ruleForm">密<span style="opacity: 0;">空</span>码：</div>
							</a-col> -->
							<a-col :span="24">
								<a-input v-model="ruleForm.password" :max-length="16" type="password" @blur="
							  () => {
								$refs.password.onFieldBlur();
							  }
							"
								 @keyup.enter.native="submitForm"
								 class="inp" placeholder="请输入密码" />
							</a-col>
						</a-row>
					</a-form-model-item>
					<a-form-model-item class="c-flex">
						<a-row >
							<a-col :span="12">
								<a-input v-model="ruleForm.code" :max-length="4" @keyup.enter.native="submitForm"
									 class="inp2" placeholder="请输入验证码" />
							</a-col>
							<a-col :span="12">
								<img class="code-box" @click="change" :src="`${vuex_url}?${num}`" >
							</a-col>
						</a-row>
					</a-form-model-item>
					<a-form-model-item>
						<a-button type="Default" class="login-btn" @click="submitForm">
							登录
						</a-button>
					</a-form-model-item>
				</a-form-model>
			</div>
		</div>
		<!-- <h3 style="position: absolute;bottom: 20%;color: #FFFFFF;opacity: 0.5;left: 50%;transform: translateX(-50%);">由联横利众公司提供技术支持  电话：0871-65122203  地址：云南省昆明市五华区环球时代西塔701室</h3> -->
	</div>
</template>

<script>
	import {login} from '@/api/login.js'
	export default {
		data() {
			return {
				ruleForm: {
					username: '',
					password: '',
					code: '',
				},
				num:'',
				rules: {
					username: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}, ],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
					],
				}
			}
		},
		mounted() {
		},
		methods: {
			change(){
				this.num = Math.floor(Math.random()*1000000)
			},
			// 提交登录表单
			submitForm() {
				console.log(123)
				this.$refs.ruleForm.validate(valid => {
					if (valid) {
						login(this.ruleForm).then(res=>{
							if(res.code==200){
								this.$router.push('/banner')
								this.$notification['success']({
									message: '登录成功',
									description: '欢迎回来',
								});
							}else{
								this.$notification['error']({
								message: '登录失败',
								description:
								  res.msg,
								 });
								 this.change()
							}
						}).catch(err=>{
							this.$notification['error']({
							message: '登录失败',
							description:
							  res.msg,
							 });
							  this.change()
						})
					} else {
						return false;
					}
				});
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
	ul {
		list-style-type: none;
		padding: 0;
	}

	li {
		display: inline-block;
		margin: 0 10px;
	}

	a {
		color: #42b983;
	}
	
	body {
		margin: 0px;
		width: 100%;
		overflow: hidden;
	}
	
	.hello{
		width: 100%;
		height: 100%;
		background: rgba(63,116,154, 1);
		/* background: url(../assets/login-bg.jpg) no-repeat;
		background-size: 100% 100%; */
	}
	
	.point-box{
		position: absolute;
		top: 50%;
		right: 10%;
		opacity: 0;
		width: 50px;
		height: 50px;
		transform-style:preserve-3d;
		transform: translate(-50%, -50%) scale(1);
		/* animation: rotate 3s linear; */
	}
	
	.small-box{
		width: 500px;
		overflow: hidden;
		position: absolute;
		top: 50%;
		right: 50%;
		text-align: center;
		transform-style:preserve-3d;
		transform: translate(50%, -50%) scale(1);
		box-shadow:inset 0px 0px 5px 1px rgb(193, 240, 240, 1);
		background: rgba(63,116,154, 0.35);
		padding: 32px 0;
	}
	
	.login-box {
		width: 500px;
		border-radius: 5px;
		background-size: 100% 100%;
		color: #fff;
		margin: 0 auto;
	}

/* 	.login-box h1 {
		margin-bottom: 40px;
		text-align: center;
		color: #fff;
		font-weight: bold;
		text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
		animation: txtLignt 3s linear infinite;
	} */

	.login-box .demo-ruleForm {
		color: #FFFFFF;
	}

	.ant-form-item-label>label {
		color: #FFFFFF;
	}

	.login-box .ant-form-item-label {
		color: #ffffff;
	}
	
	.login-box .ant-form-item{
		margin-bottom: 20px;
	}

	.login-form {
		margin-left: 10px;
	}

	.login-box .login-btn {
		width: 235px;
		height: 40px;
		background: transparent;
		border-color: #d6d6d6;
		color: #ffffff !important;
		outline-color: transparent;
	}

	.login-box .login-btn:hover {
		border-color: #d6d6d6;
		background: transparent;
		transform: scale(1.2);
	}

	.login-box .login-btn:active {
		border-color: #d6d6d6;
		background: transparent;
	}

	.login-box .login-btn:focus {
		border-color: #d6d6d6;
		background: transparent;
	}

	.login-box .login-btn.active {
		border-color: #d6d6d6;
		background: transparent;
	}

	.login-box .inp {
		width: 350px;
		height: 40px;
		margin-right: -15px;
		background-color: rgba(0, 0, 0, 0.4);
		color: #FFFFFF;
	}

	.login-box .inp2 {
		width: 150px;
		height: 40px;
		margin-right: -15px;
		margin-left: 70px;
		background-color: rgba(0, 0, 0, 0.4);
		margin-right: 10px;
		color: #FFFFFF;
	}

	.login-box .code-box {
		width: 150px;
		height: 40px;
	}

	.code-box img {
		width: 100%;
		height: 100%;
		/* object-fit: contain; */
	}

	.code-img {
		width: 160px;
		vertical-align: middle;
		margin-left: 30px;
		border-radius: 4px;
	}

	.c-flex {
		display: flex;
	}

	.login-box .has-error .ant-form-explain,
	.login-box .has-error .ant-form-split {
		text-align: left !important;
		margin-left: 110px !important;
	}

	.login-box .has-error .ant-input,
	.login-box .has-error .ant-input:hover {
		background: transparent;
	}
	@keyframes input-entry {
	  0% {
	    opacity: 0;
	  }
	  90% {
	    opacity: 0;
	  }
	  100% {
	    opacity: 1;
	  }
	}
	@keyframes form-entry {
	  0% {
	    height: 0;
	    width: 0;
	    opacity: 0;
	    padding: 0;
	  }
	  20% {
	    height: 0;
	    width: 0;
	    opacity: 0;
	  }
	  40% {
	    width: 0;
	    height: 320px;
	    opacity: 1;
	  }
	  100% {
	    height: 320px;
	    width: 500px;
	  }
	}
	@keyframes txtLignt{
		0% {
		    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
		}
		100% {
		    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
		}
	}
</style>
